<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>双向条形图案例 </title>
  <!-- 引入 ECharts 文件 -->
  <script src="https://cdn.bootcdn.net/ajax/libs/Chart.js/4.2.1/chart.min.js"></script>
</head>

<body>
  <!-- 为 ECharts 准备一个具备大小（宽高）的 容器 -->
  <div id="chart1" style="width: 80%;height: 400px;top: 50px;left: 10%;border: 3px solid #FF0000;"> </div>
</body>

</html>
<script type="text/javascript">
  // 基于准备好的容器(这里的容器是id为chart1的div)，初始化echarts实例
  var chart1 = echarts.init(document.getElementById("chart1"));
  var years = [2017, 2018];
  var myData = ['本区', '本市', '省内', '省外'];
  var dataMan = {
    2017: [4500, 5000, 4800, 5500],
    2018: [5000, 5800, 5500, 6000],
  };
  var dataWomen = {
    2017: [3500, 4200, 4000, 5200],
    2018: [4000, 5000, 4500, 5800],
  };
  /* option 开始 */
  option = {
    /* baseOption 开始 */
    baseOption: { // baseOption 是一个 『原子option』，options 数组中的每一项也是一个 『原子option』。每个『原子option』中就是ECharts文档中描述的各种配置项。
      // timeline 组件，提供了在多个 ECharts option 间进行切换、播放等操作的功能。
      // timeline 和其他组件有些不同，它需要操作『多个option』。 假设，我们把 ECharts 的传统的 option 称为原子option，
      // 那么使用 timeline 时，传入 ECharts 的 option 就成为了一个集合多个原子option的复合option。
      timeline: {
        show: true, // 是否显示 timeline 组件。如果设置为false，不会显示，但是功能还存在。[ default: true ]
        type: 'slider', // 这个属性目前只支持为 slider，不需要更改。[ default: 'slider' ]
        axisType: 'category', // 轴的类型。[ default: 'time' ], 可选值为：'value' 数值轴，适用于连续数据。'category' 类目轴，适用于离散的类目数据。'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
        currentIndex: 0, // 表示当前选中项是哪项, [ default: 0 ]。比如，currentIndex 为 0 时，表示当前选中项为 timeline.data[0]（即使用 options[0]）。
        autoPlay: true, // 表示是否自动播放。[ default: false ]
        rewind: false, // 表示是否反向播放。[ default: false ]
        loop: true, // 表示是否循环播放。[ default: true ]
        playInterval: 2000, // 表示播放的速度（跳动的间隔），单位毫秒（ms）。[ default: 2000 ]
        realtime: true, // 拖动圆点的时候，是否实时更新视图。[ default: true ]
        controlPosition: 'left', // 表示『播放』按钮的位置。可选值：'left'、'right'。[ default: 'left' ]
        zlevel: 0, // 所有图形的 zlevel 值。[ default: 0 ]
        z: 2, // 组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。z相比zlevel优先级更低，而且不会创建新的 Canvas。
        //left: 'auto', // timeline组件离容器左侧的距离。[ default: 'auto' ], left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right'。
        //top: 'auto', // timeline组件离容器上侧的距离。[ default: 'auto' ], top 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'top', 'middle', 'bottom'。
        //right: 'auto', // timeline组件离容器右侧的距离。
        //bottom: 'auto', // timeline组件离容器下侧的距离。
        padding: 5, // timeline内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。如:[100,20,20,20]
        orient: 'horizontal', // 时间线 摆放方式，可选值有：'vertical'：竖直放置。'horizontal'：水平放置。
        inverse: false, // 是否反向放置 timeline，反向则首位颠倒过来。[ default: false ]
        symbol: 'emptyCircle', // timeline标记的图形。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
        symbolSize: 10, // timeline标记的大小
        lineStyle: { // 轴线
          show: true, // 是否显示轴线。可以设置为 false 不显示轴线，则可以做出不同的样式效果。[ default: true ]
          color: '#fff', // timeline 线的颜色。[ default: '#304654' ]
          width: 2, // timeline 线宽。[ default: 2 ]
          type: 'solid', // timeline 线的类型。'solid','dashed','dotted'
          opacity: 1 // 图形透明度
        },
        label: { // 轴的文本标签
          normal: {
            show: true, // 是否显示 label。[ default: true ]
            position: 'bottom', // 'auto'： 完全自动决定。'left'： 贴左边界放置。 当 timline.orient 为 'vertical' 时有效。'right'：当 timline.orient 为 'vertical' 时有效。 贴右边界放置。
            // 'top'： 贴上边界放置。 当 timline.orient 为 'horizontal' 时有效。'bottom'： 贴下边界放置。 当 timline.orient 为 'horizontal' 时有效。
            // number： 指定某个数值时，表示 label 和轴的距离。为 0 时则和坐标轴重合，可以为正负值，决定 label 在坐标轴的哪一边。
            color: '#fff', // timeline.lable文字的颜色。[ default: '#304654' ]
            fontSize: 12, // timeline.lable文字的字体大小
            interval: 'auto', // label 的间隔。当指定为数值时，例如指定为 2，则每隔两个显示一个 label。[ default: 'auto' ]
            rotate: 0, // label 的旋转角度。正值表示逆时针旋转。[ default: 0 ]
            backgroundColor: 'transparent', // 文字块背景色。[ default: 'transparent' ]默认透明
            formatter: '{value}年份', // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。[ default: null ]
          },
        },
        checkpointStyle: { // 『当前项』（checkpoint）的图形样式。
          symbol: 'circle', // timeline.checkpointStyle 标记的图形。
          symbolSize: 13, // timeline.checkpointStyle 标记的大小
          color: '#FFF68F', // timeline组件中『当前项』（checkpoint）的颜色。[ default: '#c23531' ]
          borderWidth: 2, // timeline组件中『当前项』（checkpoint）的边框宽度。
          borderColor: '#FFF68F', // timeline组件中『当前项』（checkpoint）的边框颜色。[ default: 'rgba(194,53,49, 0.5)' ]
          animation: true, // timeline组件中『当前项』（checkpoint）在 timeline 播放切换中的移动，是否有动画。[ default: true ]
          animationDuration: 500, // timeline组件中『当前项』（checkpoint）的动画时长。[ default: 300 ]
          animationEasing: 'backln' // timeline组件中『当前项』（checkpoint）的动画的缓动效果。不同的缓动效果可以参考 缓动示例。
        },
        controlStyle: { // 『控制按钮』的样式。『控制按钮』包括：『播放按钮』、『前进按钮』、『后退按钮』。
          show: true, // 是否显示『控制按钮』。设置为 false 则全不显示。[ default: true ]
          showPlayBtn: true, // 是否显示『播放按钮』。[ default: true ]
          showNextBtn: true, // 是否显示『前进按钮』。[ default: true ]
          showPrevBtn: true, // 是否显示『后退按钮』。[ default: true ]
          color: '#fff', // 按钮颜色。[ default: '#304654' ]
          borderColor: '#fff', // 按钮边框颜色。[ default: '#304654' ]
          borderWidth: 1, // 按钮边框线宽。
          itemSize: 15, // 『控制按钮』的尺寸，单位为像素（px）。[ default: 22 ]
          itemGap: 12, // 『控制按钮』的间隔，单位为像素（px）。[ default: 12 ]
          position: 'left' // 『控制按钮』的位置。[ default: 'left' ], 当 timeline.orient 为 'horizontal'时，'left'、'right'有效。当 timeline.orient 为 'horizontal'时，'left'、'right'有效。
        },
        /*emphasis: { // 高亮样式 (包括 label,itemStyle,checkpoint,controlStyle)
        label: {
        },
        itemStyle: {
        },
        checkpoint: {
        },
        controlStyle: {
        }
        },*/
        // timeline 数据。Array 的每一项，可以是直接的数值。 如果需要对每个数据项单独进行样式定义，则数据项写成 Object。Object中，value属性为数值。
        data: [], // timeline.data 中的每一项，对应于 options 数组中的每个 option。
      },
      backgroundColor: '#000', // 背景色
      title: {
        text: '男女平均月收入对比', // 标题文本
        top: '3%',
        left: '2%', // 标题距左侧距离
        textStyle: { // 标题文本样式
          color: '#fff',
          fontSize: 18
        },
      },
      legend: { // 图例
        top: '5%', // 图例距离顶部距离
        left: 'center', // 图例距离左侧距离(此处水平居中)
        textStyle: { // 图例文本样式
          color: '#fff',
        },
        data: ['男士', '女士'] // 图例的数据数组,一般对应系列名称,即 series.name
      },
      tooltip: { // 提示框
        show: true,
        trigger: 'axis',
        axisPointer: { // 坐标轴指示器配置项。
          type: 'shadow', // 'line' 直线指示器;'shadow' 阴影指示器.
        },
        formatter: '{b}<br/>{a}: {c}元' // 提示框所提示的文本内容
      },
      // 网格grid区域
      grid: [{
        show: false, // 男士grid区域
        left: '4%',
        top: '15%',
        bottom: '20%',
        containLabel: true, // grid 区域是否包含坐标轴的刻度标签。
        width: '42%', // grid 组件的宽度。默认自适应。
      }, {
        show: false, // 中间区域(本区,本市,省内,省外)
        left: '51.7%',
        top: '20%',
        bottom: '20%',
        //width: '10%',
        tooltip: {
          show: false // 中间部分的提示框不显示也没必要显示
        }
      }, {
        show: false, // 女士grid区域
        right: '4%',
        top: '15%',
        bottom: '20%',
        containLabel: true, // grid 区域是否包含坐标轴的刻度标签。
        width: '42%', // grid 组件的宽度。默认自适应。
      },],
      // X轴线配置
      xAxis: [{ // 左侧区域
        gridIndex: 0, // x 轴所在的 grid 的索引，默认位于第一个 grid。[ default: 0 ]
        type: 'value', // 轴线类型: 数值轴
        position: 'top', // 轴线位置(此处位于顶部)
        inverse: true, // 是否是反向坐标轴.[ default: false ]
        axisLine: {
          show: false, // 轴线不显示
        },
        axisTick: {
          show: false, // 轴线刻度不显示
        },
        axisLabel: { // 轴线刻度标签
          show: true, // 显示刻度标签
          textStyle: { // 标签样式
            color: '#fff',
            fontSize: 12
          },
        },
        splitLine: { // 垂直于X轴的分隔线
          show: true, // 显示分隔线
          lineStyle: { // 分隔线样式
            color: '#fff',
            width: 1,
            type: 'solid',
          },
        },
        // 强制设置坐标轴分割间隔
        interval: 2000,
        min: 0, // 最小值
        max: 8000 // 最大值
      },
      { // 中间区域
        gridIndex: 1,
        show: false, // 中间部分不显示X轴
      },
      { // 右侧区域
        gridIndex: 2,
        type: 'value',
        position: 'top',
        inverse: false, // 是否是反向坐标轴.[ default: false ]
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: '#fff',
            fontSize: 12
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#fff',
            width: 1,
            type: 'solid',
          },
        },
        // 强制设置坐标轴分割间隔
        interval: 2000,
        min: 0, // 最小值
        max: 8000 // 最大值
      },],
      // Y轴线配置
      yAxis: [{ // 左侧区域
        gridIndex: 0, // y 轴所在的 grid 的索引，默认位于第一个 grid。[ default: 0 ]
        type: 'category', // 轴线类型: 类目轴
        // 类目轴中 boundaryGap 可以配置为 true 和 false。默认为 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
        boundaryGap: true, // 坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。
        inverse: true, // 是否是反向坐标轴.[ default: false ]
        position: 'right', // y轴的位置。'left' or 'right'
        axisLine: {
          show: false // y轴线不显示
        },
        axisTick: {
          show: true, // y轴线刻度不显示
          lineStyle: { // 刻度线样式
            color: '#fff'
          }
        },
        axisLabel: {
          show: false, // 刻度标签不显示
        },
        data: myData // Y轴(这里是类目轴)的类目数据
      },
      {
        gridIndex: 1, // 中间区域
        type: 'category',
        boundaryGap: true,
        inverse: true,
        position: 'left', // y轴的位置。'left' or 'right'
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: true, // 显示中间部分的Y轴刻度标签
          textStyle: { // 标签样式
            color: '#fff',
            fontSize: 12,
          },
        },
        data: myData
      },
      { // 右侧区域
        gridIndex: 2,
        type: 'category',
        boundaryGap: true,
        inverse: true,
        position: 'left',
        axisLine: {
          show: false
        },
        axisTick: {
          show: true,
          lineStyle: { // 刻度线样式
            color: '#fff'
          }
        },
        axisLabel: {
          show: false,
        },
        data: myData
      }],
      series: []
    },
    /* baseOption 结束 */
    options: []
  };
  /* option 结束 */
  /* 逐个为配置项中的 data 和 series 赋值 */
  for (var i = 0; i < years.length; i++) {
    // 给时间线的 data 赋值
    option.baseOption.timeline.data.push(years[i]);
    // 根据年份的不同 给左侧,中间,右侧(男士,中间部分,女士)的三个不同系列配置系列列表 series[{},{},{}]
    // 此处中间部分的系列不必设置
    option.options.push({
      series: [
        {
          name: '男士', // 系列名称
          type: 'bar',
          barGap: 5, // 柱间距离
          barWidth: 10, // 男士柱子宽度
          xAxisIndex: 0, // 对应在X轴的grid索引
          yAxisIndex: 0, // 对应在Y轴的grid索引
          label: {
            normal: {
              show: true,
              position: 'left',
              textStyle: { // 柱子上数字样式
                color: '#fff',
                fontSize: 10,
              },
            },
            emphasis: {
              show: true,
              position: 'left',
              textStyle: { // 柱子上数字样式
                color: '#fff',
                fontSize: 10,
              },
            },
          },
          itemStyle: { // 柱条样式。
            normal: {
              color: '#3300ff', // 普通状态下柱条颜色
            },
            emphasis: {
              color: '#00ffff', // 普通状态下柱条颜色
            },
          },
          data: dataMan[years[i]], // 系列中的数据内容数组
        },
        {
          name: '女士', // 系列名称
          type: 'bar',
          barGap: 5, // 柱间距离
          barWidth: 10, // 女士柱子宽度
          xAxisIndex: 2, // 对应在X轴的grid索引
          yAxisIndex: 2, // 对应在Y轴的grid索引
          label: {
            normal: {
              show: true,
              position: 'right',
              textStyle: { // 柱子上数字样式
                color: '#fff',
                fontSize: 10,
              },
            },
            emphasis: {
              show: true,
              position: 'right',
              textStyle: { // 柱子上数字样式
                color: '#fff',
                fontSize: 10,
              },
            },
          },
          itemStyle: { // 柱条样式。
            normal: {
              color: '#FF0000', // 普通状态下柱条颜色
            },
            emphasis: {
              color: '#fe89ff', // 高亮状态下柱条颜色
            },
          },
          data: dataWomen[years[i]], // 系列中的数据内容数组
        }
      ]
    });
  }
  // 使用刚指定的配置项和数据显示图表
  chart1.setOption(option)
</script>